script#template-welcome-view(type="text/template")
  |div.container.demo-1
  |  div.codrops-top.clearfix
  |    a.skip(href="/")
  |      strong SKIP
  |  div#slider.sl-slider-wrapper
  |    div.sl-slider		
  |      div.sl-slide.bg-1(data-orientation='horizontal', data-slice1-rotation='-25', data-slice2-rotation='-25', data-slice1-scale='2', data-slice2-scale='2')
  |        div.sl-slide-inner
  |          div.deco
  |            div.load-outer
  |              div.loader
  |                div.top
  |                    div.load-bar
  |                    div.load-bar
  |                    div.load-bar
  |                    div.load-bar
  |                    div.load-bar
  |                div.bottom
  |                    div.load-bar
  |                    div.load-bar
  |                    div.load-bar
  |                    div.load-bar
  |                    div.load-bar
  |          h2 Welcome to Cantas!
  |          blockquote
  |            <p>Finding a flexible tool to manage your work?
  |            <br>Your current tool is so complicated?<br>
  |            <br>You&lsquo;ve come to the right place!
  |            <br>Let us show you a <strong>simple and easy tool</strong> to manage your work!</p>
  |      div.sl-slide.bg-2(data-orientation='vertical', data-slice1-rotation='10', data-slice2-rotation='-15', data-slice1-scale="1.5", data-slice2-scale='1.5')
  |        div.sl-slide-inner
  |          div.deco
  |          h2 Create a Board
  |          blockquote
  |            <p>After login, you can click the yellow shining button 
  |            <br><strong>'New Board' </strong>
  |            <br>to create your own board and manage your work in it. </p>
  |      div.sl-slide.bg-3(data-orientation='horizontal', data-slice1-rotation='3', data-slice2-rotation='3', data-slice1-scale='2', data-slice2-scale='1')
  |        div.sl-slide-inner
  |          div.deco
  |          h2 Create A List
  |          blockquote
  |            <p>In the board, there has been 3 lists named 'To Do', 'Doing', 'Done'. 
  |            <br>You want more lists? 
  |            <br> Just click the yellow shining button <strong>'New List'</strong> on the top.</p> 
  |      div.sl-slide.bg-4(data-orientation='vertical', data-slice1-rotation='-5', data-slice2-rotation='25', data-slice1-scale='2', data-slice2-scale='1')
  |        div.sl-slide-inner
  |          div.deco
  |          h2 Add a Card
  |          blockquote
  |            <p>What can you do for the existed list? 
  |            <br>Just click the button <strong>'Add a Card'</strong>.
  |            <br>Input your tasks or things you want to record.</p>
  |      div.sl-slide.bg-5(data-orientation='horizontal', data-slice1-rotation='-5', data-slice2-rotation='10', data-slice1-scale='2', data-slice2-scale='1')
  |        div.sl-slide-inner
  |          div.deco
  |          h2 Find more in card detail 
  |          blockquote
  |            <p>Have added a card?
  |            <br>Click every card, you can manage more informations.
  |            <br>Such as 
  |            <br><strong>Add checklists</strong>
  |            <br><strong>Leave comments</strong>
  |            <br><strong>and so on.</strong>
  |    nav#nav-arrows.nav-arrows
  |      span.nav-arrow-prev Previous
  |      span.nav-arrow-next Next
  |    nav#nav-dots.nav-dots
  |      span.nav-dot-current
  |      span
  |      span
  |      span
  |      span
